﻿@using Utils
@{
    decimal single_product_total = ViewBag.single_product_total;
    int single_product_bbc_count = ViewBag.single_product_bbc_count;
    int single_product_syj_count = ViewBag.single_product_syj_count;
    string single_product_syj_unit = ViewBag.single_product_syj_unit;
    int single_product_order_count = ViewBag.single_product_order_count;
    decimal single_product_cost_per_order = ViewBag.single_product_cost_per_order;

    int single_product_store = ViewBag.single_product_store;
    int single_product_scan = ViewBag.single_product_scan;
    int pay_user_num = ViewBag.pay_user_num;
    decimal pay_user_rate = ViewBag.pay_user_rate;
    string product_sale_price = ViewBag.product_sale_price;
    string product_preferential_price = ViewBag.product_preferential_price;

    string product_specification = ViewBag.product_specification;
    string product_market_name = ViewBag.product_market_name;
    string product_create_time = ViewBag.product_create_time;
    string product_origin = ViewBag.product_origin;

    string beginTime = Request["beginTime"];
    string endTime = Request["endTime"];
    string plateformType = Request["plateformType"];
    long productId = Request["productId"].ConToLong();
    string productName = Request["productName"];
    long syjno = Request["syjno"].ConToLong();
}

<script src="~/Content/js/plugs/echarts-2.2.7/echarts-all.js" type="text/javascript"></script>
<script src="~/Content/js/baseEchartOption.js" type="text/javascript"></script>
<style type="text/css">
    .analysisBox {
        text-align: center;
        border: 1px solid #ece6e6;
        width: 90%;
        margin: auto;
        margin-bottom: 4rem;
    }


        .analysisBox div.analysisContainer {
            width: 100%;
            height: 13rem;
        }
</style>

<input type="hidden" id="plateformTypeOld" value="@plateformType" />
<input type="hidden" id="productId" value="@productId" />
<input type="hidden" id="productName" value="@productName" />
<input type="hidden" id="syjno" value="@syjno" />

<!--不要删除这个div-->
<div class="page" style="position:relative;">
</div>
<header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/Product/Index">
        <span class="icon icon-left"></span>
        返回
    </a>
    <h1 class="title">商品详情</h1>
</header>
<div class="content">
    <div class="list-block" style="margin:0;">
        <ul>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="label">@productName</div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">开始时间</div>
                        <div class="item-input">
                            <input type="date" placeholder="开始时间" id="beginTime" value="@beginTime">
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">结束时间</div>
                        <div class="item-input">
                            <input type="date" placeholder="结束时间" id="endTime" value="@endTime">
                        </div>
                    </div>
                </div>
            </li>
            <li>
                <div class="item-content">
                    <div class="item-inner">
                        <div class="item-title label">所属平台</div>
                        <div class="item-input">
                            <select id="plateformType"></select>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <p><a href="#" class="button button-fill button-big button-success" onclick="productDetailIncomeGeneral()">查询</a></p>
            </li>
        </ul>
    </div>

    <div class="content-block-title">核心指标</div>

    <div class="list-block">
        <ul>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">销售金额</div>
                    <div class="item-after">@single_product_total</div>
                </div>
            </li>
            @if (single_product_bbc_count > 0)
                {
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">电商销售数量</div>
                        <div class="item-after">@single_product_bbc_count 件</div>
                    </div>
                </li>
                }
            @if (single_product_syj_count > 0)
                {
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">实体销售数量</div>
                        <div class="item-after">@single_product_syj_count @single_product_syj_unit</div>
                    </div>
                </li>
                }
            @if (single_product_syj_count == 0 && single_product_bbc_count == 0)
                {
                <li class="item-content">
                    <div class="item-inner">
                        <div class="item-title">销售数量</div>
                        <div class="item-after">0</div>
                    </div>
                </li>
                }
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">下单笔数</div>
                    <div class="item-after">@single_product_order_count</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">单笔消费额</div>
                    <div class="item-after">@single_product_cost_per_order</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">当前库存</div>
                    <div class="item-after">@single_product_store</div>
                </div>
            </li>
            
            @if (plateformType == "-1" || plateformType == "1") { 
                <br />
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">浏览量</div>
                    <div class="item-after">@single_product_scan</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">支付买家数</div>
                    <div class="item-after">@pay_user_num</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">支付转化率</div>
                    <div class="item-after"> @(Math.Round(pay_user_rate, 2).ToString()+"%")</div>
                </div>
            </li>
            <br />
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">产地</div>
                    <div class="item-after">@product_origin</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">上架时间</div>
                    <div class="item-after">@product_create_time</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">上架规格</div>
                    <div class="item-after">@product_specification</div>
                </div>
            </li>
            <br />
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">商城原价</div>
                    <div class="item-after">@product_sale_price</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">折扣价</div>
                    <div class="item-after">@product_preferential_price</div>
                </div>
            </li>
            <li class="item-content">
                <div class="item-inner">
                    <div class="item-title">促销方式</div>
                    <div class="item-after">@product_market_name</div>
                </div>
            </li>
            }

        </ul>
    </div>

    <style type="text/css">
        #detailData {
            margin-bottom: 3rem;
            background-color: white;
            padding: 1rem 0px;
        }

            #detailData table {
                width: 100%;
                text-align: center;
            }

                #detailData table tr {
                    border-bottom: 1px solid #e7e7e7;
                }
    </style>



    <div class="content-block-title">详细数据</div>

    <div id="product_income_detail_tendency_div" class="analysisBox">
        <div id="product_income_detail_tendency" class="analysisContainer"></div>
    </div>

    <div id="detailData">

    </div>

</div>




<script type="text/javascript">

    var product_income_detail_tendency = echarts.init(document.getElementById('product_income_detail_tendency'));
    var product_income_detail_tendency_option = null;
    var nameList = null;

    function productDetailIncomeGeneral() {
        var beginTime = $("#beginTime").val();
        var endTime = $("#endTime").val();
        var plateformType = $("#plateformType").val();

        var productId = $("#productId").val();
        var productName = $("#productName").val();
        var syjno = $("#syjno").val();
        $.showPreloader('Loading...');

        window.location.href = "/Product/Detail?productId=" + productId + "&productName=" + productName + "&plateformType=" + plateformType + "&beginTime=" + beginTime + "&endTime=" + endTime + "&syjNo=" + syjno;
    }

    function productDetailIncomeTendency() {
        var beginTime = $("#beginTime").val();
        var endTime = $("#endTime").val();
        var productId = $("#productId").val();
        var plateformType = $("#plateformType").val();
        var syjNo = $("#syjNo").val();


        $.post("/Product/GetProductDetailIncome", { productId: productId, beginTime: beginTime, endTime: endTime, plateformType: plateformType, syjNo: syjNo }, function (result) {
            product_income_detail_tendency.clear();
            product_income_detail_tendency_option = null;
            nameList = null;

            $.hidePreloader();
            var temp = result.Body;
             nameList = temp.NameList;
            var dataList = temp.DataList;
            var legendList = temp.LegendList;
            var title = "";
            var msg = result.Msg;

            if (msg == "0") {
                product_income_detail_tendency_option = getBarAndLineOption(title, legendList, nameList, dataList, false, true);
            } else {                                            
                product_income_detail_tendency_option = getLineOption(title, legendList, nameList, dataList, true, false, false);
            }
            product_income_detail_tendency.setOption(product_income_detail_tendency_option);

            var htmlContent = "";
            if (msg == "0") {
                htmlContent = '<table id="dayDetail">' +
                    '<thead>' +
                        '<tr>' +
                            '<td>时间</td>' +
                            '<td>销售额</td>' +
                            '<td>较前日增长</td>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody>';

                for (var i = nameList.length-1; i >= 0; i--) {
                    var timeStr = nameList[i];
                    var income = dataList[0][i];
                    var rate = dataList[1][i];

                    htmlContent += '<tr>' +
                                   '<td>' + timeStr + '</td>' +
                                   '<td>' + income + '</td>' +
                                   '<td>' + rate + '%</td>' +
                                '</tr>';
                }
               
                htmlContent += '</tbody></table>';
            } else {
                htmlContent = ' <table id="timeDetail">' +
                    '<thead>' +
                        '<tr>' +
                            '<td>时段</td>' +
                            '<td>今日</td>' +
                            '<td>昨日</td>' +
                        '</tr>' +
                    '</thead>' +
                    '<tbody>';

                var now = new Date();
                var nowHour = now.getHours();
                var nowMonth_ = now.getMonth() + 1;
                var nowDate_ = now.getDate();
                var nowDate = nowDate_ < 10 ? "0" + nowDate_ : nowDate_ + "";
                var nowMonth = nowMonth_ < 10 ? "0" + nowMonth_ : nowMonth_ + "";
                var nowString = now.getFullYear() + '-' + nowMonth + '-' + nowDate;

                for (var i = nameList.length - 1; i >= 0; i--) {
                    if (beginTime == nowString) {
                        var time = parseInt(nameList[i].substring(0, nameList[i].indexOf(":")));
                        if (nowHour >= time) {
                            var timeStr = nameList[i];
                            var incomeNow = dataList[1][i];
                            var incomeBefore = dataList[0][i];

                            htmlContent += '<tr>' +
                                            '<td>' + timeStr + '</td>' +
                                            '<td>' + incomeNow + '</td>' +
                                             '<td>' + incomeBefore + '</td>' +
                                         '</tr>';
                        }
                    } else {
                        var timeStr = nameList[i];
                        var incomeNow = dataList[1][i];
                        var incomeBefore = dataList[0][i];

                        htmlContent += '<tr>' +
                                        '<td>' + timeStr + '</td>' +
                                        '<td>' + incomeNow + '</td>' +
                                         '<td>' + incomeBefore + '</td>' +
                                     '</tr>';
                    }
                }

                htmlContent += '</tbody></table>';
            }
            $("#detailData").html(htmlContent);
        })
    }

    $(function () {
        var plateformTypeOld = parseInt($("#plateformTypeOld").val());
        var htmlSelectOption = "";
        if (plateformTypeOld == -1) {
            htmlSelectOption = '<option value="-1">全部</option><option value="0">实体</option><option value="1">电商</option>';
        } else if (plateformTypeOld == 0) {
            htmlSelectOption = '<option value="0">实体</option>';
        } else if (plateformTypeOld == 1) {
            htmlSelectOption = '<option value="1">电商</option>';
        } else {
            htmlSelectOption = '<option value="-1">全部</option><option value="0">实体</option><option value="1">电商</option>';
        }
        $("#plateformType").html(htmlSelectOption);
        $("#plateformType").val(plateformTypeOld);

        productDetailIncomeTendency();
    })

    product_income_detail_tendency.on("click", function (params) {
        var start = parseInt((100 / nameList.length) * (params.dataIndex - 3));
        if (start < 0) {
            start = 0;
        }
        var end = parseInt((100 / nameList.length) * (params.dataIndex + 3));
        if (end > 100) {
            end = 100;
        }

        product_income_detail_tendency.clear();

        product_income_detail_tendency_option.dataZoom.start = start;
        product_income_detail_tendency_option.dataZoom.end = end;

        product_income_detail_tendency.setOption(product_income_detail_tendency_option);

    });
</script>